<!-- 设置页面 -->
<template>
	<view class="setting">
		<view class="setting-top">
			<view class="avatar-box">
				<view class="left">
					<view class="avatar">
						<!-- 有头像，则显示头像，没头像，则用默认头像 -->
						<image :src="userInfo.avatarUrl"></image>
					</view>
				</view>
				<view class="text-gray" @click="chooseAvatar">
					修改头像
					<u-icon name="arrow-right" color="#aaaaaa" size="28"></u-icon>
				</view>
			</view>
			<!-- 有昵称显示昵称，无昵称，显示手机号码 -->
			<text class="name">{{userInfo.busiName}}</text>
		</view>
		<view class="menu">
			<navigator url="./payPwd/register" class="set-li" v-if="!userInfo.payPwd">
				<text>设置支付密码</text>
				<u-icon style="width: 1em !important" name="arrow-right" color="#aaaaaa" size="28"></u-icon>
			</navigator>
			<navigator url="./payPwd/changePayPwd" class="set-li" v-else>
				<text>修改支付密码</text>
				<u-icon style="width: 1em !important" name="arrow-right" color="#aaaaaa" size="28"></u-icon>
			</navigator>
			<navigator url="./feedback/feedback" class="set-li">
				<text>意见反馈</text>
				<u-icon style="width: 1em !important" name="arrow-right" color="#aaaaaa" size="28"></u-icon>
			</navigator>
			<navigator url="./about/about" class="set-li">
				<text style="flex: 1;">关于M家购</text>
				<view style="color: #666666; margin-right: 20rpx;">版本号 1.0.0</view>
				<u-icon style="width: 1em !important" name="arrow-right" color="#aaaaaa" size="28"></u-icon>
			</navigator>
		</view>
		<tui-modal :show="modal" @click="handleClick" @cancel="hide" title="提示" content="确定退出登录吗？"></tui-modal>
		<view class="loginOut" @click="outlogin">退出账号</view>
	</view>
</template>

<script>
	import uploadFile from '@/common/js/upload/uploadCommon.js'
	export default {
		data() {
			return {
				userInfo: {},
				modal:false
			}
		},
		async created() {
			this.userInfo = await this.$store.state.userInfo;
			// 监听从裁剪页发布的事件，获得裁剪结果
			uni.$on('uAvatarCropper', path => {
				// this.userInfo.avatarUrl = path;
				// 可以在此上传到服务端
				uploadFile(path,"advert/",avatarUrl => {
					// #ifdef H5
					avatarUrl = result.replace('/oss','https://sbb-osss.oss-cn-beijing.aliyuncs.com/');
					// #endif
					// 更新头像
					console.log('---------');
					this.$http.post('/api/auth/business/editBusin',{businId:this.userInfo.id,avatarUrl}).then(res => {
						if(!res.success) return;
						this.userInfo.avatarUrl = avatarUrl;
						this.$tip.toast(res.msg);
						this.$store.commit('getUserInfo', res.data);
					})
					//成功返回
					}, fail => { //失败返回
						console.log(JSON.stringify(fail))
					}
				)
			})
		},
		methods: {
			// 退出登录
			outlogin(){
				this.modal = true
			},
			hide(){
				this.modal = false
			},
			handleClick(e){
				this.hide();
				if(e.index == 1){
					this.$http.post('/api/business/logout',this.$store.state.userInfo.id, {header:{authType:'false'}}).then(res => {
						this.$tip.successRedirect(res, 1500, '/pages/auth/apply/apply');
						this.$store.commit('removeUserInfo')
					})
				}
			},
			chooseAvatar(){
				this.$u.route({
					// 关于此路径，请见下方"注意事项"
					url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					// 内部已设置以下默认参数值，可不传这些参数
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 300,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 200,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			}
		}
	}


</script>

<style scoped lang="scss">
.setting{
	height: 100vh;
	position: relative;
	.setting-top{
		border-bottom-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		.avatar-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 7rpx 28rpx;
			.left{
				display: flex;
				align-items: center;
				.avatar{
					width: 100rpx;
					height: 100rpx;
					margin-right: 30rpx;
					border-radius: 5000upx;
					image {
						width: 100%;
						height: 100%;
						border: solid 2rpx #eee;
						border-radius: 50%;
					}
				}
			}
		}
		.name{
			margin: 0 28rpx;
		}
	}
	.menu{
		margin-top: 20px;
		background-color: #fff;
	}
	.loginOut {
		position: absolute;
		bottom: 0;
		width: 100%;
		border-radius: 20rpx;
		line-height: 102rpx;
		text-align: center;
		background-color: #fff;
	}
}

.set-li{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
</style>

